<template>
  <div class="register-container container">
    <div class="register-form card mx-auto">
      <div class="card-body">
        <h2 class="card-title text-center mb-4">用户注册</h2>
        <form @submit.prevent="register">
          <div class="mb-3">
            <label for="username" class="form-label">用户名:</label>
            <input type="text" id="username" v-model="username" class="form-control" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码:</label>
            <input type="password" id="password" v-model="password" class="form-control" required>
          </div>
          <div class="mb-3">
            <label for="role" class="form-label">角色:</label>
            <select id="role" v-model="role" class="form-select" required>
              <option value="student">学生</option>
              <option value="teacher">教师</option>
              <option value="principal">校长</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="phone" class="form-label">手机号:</label>
            <input type="text" id="phone" v-model="phone" class="form-control">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱:</label>
            <input type="email" id="email" v-model="email" class="form-control">
          </div>
          <div class="d-grid">
            <button type="submit" class="btn btn-primary">注册</button>
          </div>
          <p class="login-link text-center mt-3">
            已有账户？<router-link to="/login">立即登录</router-link>
          </p>
        </form>
        <div v-if="successMessage" class="alert alert-success mt-3" role="alert">
          {{ successMessage }}
        </div>
        <div v-if="errorMessage" class="alert alert-danger mt-3" role="alert">
          {{ errorMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Register',
  data() {
    return {
      username: '',
      password: '',
      role: 'student',
      phone: '',
      email: '',
      successMessage: '',
      errorMessage: ''
    }
  },
  methods: {
    async register() {
      try {
        const response = await axios.post('/api/users/register', {
          username: this.username,
          password: this.password,
          role: this.role,
          phone: this.phone,
          email: this.email
        })
        
        if (response.data) {
          this.successMessage = '注册成功！'
          // 清空表单
          this.username = ''
          this.password = ''
          this.role = 'student'
          this.phone = ''
          this.email = ''
          
          // 2秒后跳转到登录页
          setTimeout(() => {
            this.$router.push('/login')
          }, 2000)
        }
      } catch (error) {
        console.error('注册错误:', error)
        if (error.response) {
          this.errorMessage = `注册失败：${error.response.data || '用户名已存在'}`
        } else {
          this.errorMessage = '网络错误，请检查服务器是否正常运行'
        }
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.register-form {
  width: 100%;
  max-width: 400px;
}
</style>